import React, { useEffect, useState } from 'react'
import Header from '../../components/Header/Header'
import Tablist from '../../components/Tablist/Tablist'
import { Button, Mask, Popup, Toast } from 'antd-mobile'
import { imgPre } from '../../request/http'
import './Detail.less'
import { reqCartAdd, reqGoodsInfo } from '../../request/api'

// 底部图片
import kefu from '../../assets/img/kefu.png'
import dianpu from '../../assets/img/dianpu.png'
import gwc from '../../assets/img/gwc.png'
import { Link } from 'react-router-dom'


const Detail = (props) => {
  // 1.初始化状态
  const [goodsinfo, setGoodsinfo] = useState({});
  const [visible, setVisible] = useState(false);
  const [num, setNum] = useState(1);
  const [arr, setArr] = useState(['商品', '评价', '详情', '推荐']);

  // 2.一进页面发请求
  useEffect(() => {
    reqGoodsInfo({ id: props.match.params.id }).then(res => {
      setGoodsinfo(res.data.list[0]);
    });
  }, []);
  // 加入购物车
  const addCart = () => {
    let uid = JSON.parse(sessionStorage.getItem('userinfo')).uid;
    let type = props.match.params.type;
    let goodsid = goodsinfo.id;
    reqCartAdd({ uid, type, goodsid, num }).then(res => {
      if (res.data.code === 200) {
        Toast.show({
          content: res.data.msg
        })
        setVisible(false);
      }
    })
  }
  // --
  const sub=()=>{
    if(num<=1){
      Toast.show({
        content:'宝贝数量不能再少了'
      });
      return;
    }
    setNum(num-1);
  }
  // ++
  const add=()=>{
    setNum(num+1);
  }
  return (
    <div className='detail'>
      <Header title="商品详情" back></Header>
      {/* 3.页面渲染 */}
      <Tablist arr={arr}></Tablist>
      <div className='content'>
        <img src={imgPre + goodsinfo.img} alt="" />
        <div className='text'>
          <span>{'￥' + goodsinfo.price}</span>
          <i>{'￥' + goodsinfo.market_price}</i>
          <p>{goodsinfo.goodsname}</p>
        </div>
      </div>
      {/* 弹窗部分 */}
      {/* 遮罩层 */}
      <Mask visible={visible} onMaskClick={() => setVisible(false)} />
      {/* 弹窗 */}
      <Popup
        visible={visible}
        onMaskClick={() => setVisible(false)}
        bodyStyle={{ height: '40vh' }}
      >
        <div className='nums'>
          购买数量：
          <span>
            {/* {num} */}
            <button onClick={()=>sub()}>-</button>
            <input type="text" value={num} onChange={() => { }} />
            <button onClick={() =>add()}>+</button>
          </span>
        </div>
        <div className='sure' onClick={() => addCart(num)}>确定</div>
      </Popup>
      {/* 底部导航 */}
      <footer className='footer'>
        <ul className='icon'>
          <li>
            <img src={kefu} alt="" />
            <div>客服</div>
          </li>
          <li>
            <img src={dianpu} alt="" />
            <div>店铺</div></li>
          <li>
            <Link to="/index/shop">
              <img src={gwc} alt="" />
              <div>购物车</div>
            </Link>
          </li>
        </ul>
        <div className='btn'>
          <Button onClick={() =>setVisible(true)}>加入购物车</Button>
          <Button>立即购买</Button>
        </div>
      </footer>
    </div>
  )
}
export default Detail;
